
<template>
  <div class="header" style="clear:both;">
    <ul>
      <li class="logo" style="width:10%;">
        <img :src="logo" />
      </li>
      <li style="width:80%" >
        <router-link to="search">
          <div class="searchbox">搜索</div>
        </router-link>
      </li>
      <li class="logo" style="width:10%;">
        <router-link to="history">
        <img :src="history" />
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "indexHeader",
  data() {
    return {
      logo: require("@/assets/images/logo.png"),
      history: require("@/assets/images/history.png")
    };
  },
  props: {
    msg: String
  }
};
</script>

<style scoped>
a{text-decoration:none;}
.header{
    width:100%;
    position:fixed;
    top:0px;
    background-color:#ffffff ;
    
}
.searchbox {
  border:1px solid hsl(0, 0%, 96%);
  background-color: hsl(0, 0%, 96%);
  border-radius:20px;
  widows: 100%;
  height: 28px;
  line-height: 28px;
  padding-left:10px;
  padding-right: 10px;
  color: #c9c9c9;
  text-align: center;
  font-size: 13px;
  margin-top:5px;
  cursor: pointer;
}
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width:100%;
    height: 40px;
}
li{
    list-style: none;
    float: left;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
    vertical-align: middle;
}
.logo{
    width:32px;
    margin-left: auto;
    margin-right: auto;
}
.logo img{
    width:22px;
    height:22px;
    margin-top: 9px;
}
</style>